import { Link, Outlet } from "umi";
import "./index.less";
import { useEffect } from "react";

export default function Index() {
  const messageCallback = (messageObj: any) => {
    const data = messageObj.data;
    console.log('子应用传递的数据：',data)
  };

  // message监听及销毁
  // 子应用可以通过postMessage发生信息，主应用做出对应操作
  useEffect(() => {
    window.addEventListener("message", messageCallback);
    return () => {
      window.removeEventListener("message", messageCallback);
    };
  }, []);

  return (
    <div className="masterApp">
      <div className="masterAppHeader">
        <h3>
          <Link to={"/home"}>【qiankun】微前端架构</Link>
        </h3>
        <ul className="navBar">
          <li>
            <Link to={"/app1"}>子应用一</Link>
          </li>
          <li>
            <Link to={"/app2"}>子应用二</Link>
          </li>
        </ul>
      </div>
      <div className="masterAppContent">
        <Outlet />
      </div>
    </div>
  );
}
